<template>
  <div @click.self="clickCloseVideo" v-show="showVideo" class="c-pf c-p-l0 c-p-t0 c-pz10000 c-flex-column c-pt20 c-translucent-balck80 c-w100 c-h">
    <div id="myVideo" class="c-w100-im" style="width:100%; height:auto;margin: 0 auto;"></div>
    <div @click="clickCloseVideo" class="c-pt210 c-flex-row c-flex-center c-opacity60">
      <img src="../../../assets/i/wap/clockIn/video_exit.png" class="c-ww80" alt="">
    </div>
    <div @click="clickCloseVideo" class="c-fs20 c-fc-white c-textAlign-c c-pt20 c-opacity60">点击半透明区域退出观看</div>
  </div>
</template>

<script>
import { getXgplayer, destoryPlayer } from "@/utils/xgplayerJs.js";
let player = null;
export default {
  name: 'VideoPopup',
  components: {

  },
  props: {
    showVideo: { // 是否显示弹窗并开始播放视频
      type: Boolean,
      default: false
    },
    videoSrc: { // mp4播放地址，与m3u8至少传一个
      type: String,
      default: ''
    },
    m3u8Url: { // m3u8播放地址，与mp4至少传一个
      type: String,
      default: ''
    },
  },
  beforeCreate() {
  },
  data() {
    return {
    }
  },
  created() {},
  mounted() {},
  computed: {
  },
  watch: {
    showVideo(val) {
      if (val) {
        this.clickShowVideo();
      } else {
        this.clickCloseVideo();
      }
    }
  },
  methods: {
    //初始化视频播放器
    initTcPlayer(mp4Url, m3u8Url) {
      if (mp4Url == "" || mp4Url == null) {
        mp4Url = m3u8Url ? m3u8Url : "";
      }
      if (m3u8Url == "" || m3u8Url == null) {
        m3u8Url = mp4Url ? mp4Url : "";
      }
      let videoObj = {
        videoMp4: mp4Url,
        videoM3U8: m3u8Url,
        autoplay: true,
        fluid: false,
        isCssFullScreen: true,
        poster: require("../../../../public/i/wap/index/poster.png")
      };
      this.$nextTick(() => {
        player = getXgplayer("myVideo", videoObj);
        player.play();
      })
    },
    clickShowVideo() {
      if (
        player &&
        ((player.playerType == 'xg' && (player.config.url == this.videoSrc || player.config.url == this.m3u8Url)) || (player.playerType == 'tc' && (player.cache_.src == this.videoSrc || player.cache_.src == this.m3u8Url)))
      ) {
        player.play();
      } else {
        destoryPlayer(player);
        this.initTcPlayer(this.videoSrc, this.m3u8Url);
      }
    },
    clickCloseVideo() {
      if (player) {
        destoryPlayer(player);
        player = null;
      }
      this.$emit('clickCloseVideo')
    }
  },
  destroyed() {
    if (player) {
      destoryPlayer(player);
      player = null;
      document.querySelector("#myVideo").innerHTML = "";
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  width: 90%;
  position: fixed;
  top: 1rem;
  left: 5%;
  z-index: 99999;
}
.content > div > img {
  width: 1.2rem;
  height: 2.2rem;
  position: absolute;
  top: 0.4rem;
  right: 0.3rem;
  z-index: 1004;
}
.imgbox {
  width: 1.6rem;
  height: 0.8rem;
  margin-left: 0.2rem;
  margin-right: 0.4rem;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 99998;
  width: 100%;
  max-width: 16rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
